<template>
  <div class="nav-list-container">
    <div v-for="item in navList" :key="item.value">
      <div
        v-if="
          ['cart', 'orderList'].includes(item.link) &&
          ['admin', 'user'].includes(role as any)
        "
        @click="changeNav(item)"
        :class="{ active: activeIndex == item.link }"
        class="nav-item"
      >
        <span>{{ item.title }}</span>
      </div>
      <div
        v-if="item.link == 'manage' && role == 'admin'"
        @click="changeNav(item)"
        :class="{ active: activeIndex == item.link }"
        class="nav-item"
      >
        <span>{{ item.title }}</span>
      </div>
      <div
        v-if="['home', 'classify'].includes(item.link)"
        @click="changeNav(item)"
        :class="{ active: activeIndex == item.link }"
        class="nav-item"
      >
        <span>{{ item.title }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";

const store = useStore();
const router = useRouter();
const route = useRoute();

// Props
const props = defineProps({
  navList: {
    type: Array,
    default: () => [],
  },
  role: {
    type: String,
  },
});

// Data
const activeIndex = ref<string>(route.name as string);

// Methods
const changeNav = (item: any) => {
  activeIndex.value = item.link;
  router.push(`/${item.link}`);
  emit("navChange", item);
};

// Emits
const emit = defineEmits(["navChange"]);
</script>

<style scoped lang="less">
.nav-list-container {
  display: flex;
  flex-direction: row;
  cursor: pointer;

  .nav-item {
    height: 100%;
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    &:hover {
      background: var(--color-3);
      border-bottom: solid 2px var(--color-1);
    }
  }
}

.active {
  background: var(--color-3);
  border-bottom: solid 2px var(--color-1);
}
</style>
